<template>
    <div class="hello">
        <h5>{{msg}}</h5>
        
        <el-row>
            <el-button @click="logout">注销</el-button>
        </el-row>

        <el-card class="box-card" style="width: 400px; margin: 20px;">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="定时器ID">
                    <el-input v-model="form.timer"></el-input>
                </el-form-item>
                <el-form-item label="执行状态">
                    <el-switch v-model="form.timer_status" @change="queryTest"></el-switch>
                </el-form-item>
                <el-form-item label="执行间隔">
                    <el-input v-model="form.spacing">
                        <template slot="append">ms</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="执行次数">
                    <el-input v-model="form.times" :disabled="true">
                        <template slot="append">
                            <el-button type="primary" @click="form.times = 0">重置</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
        </el-card>

        <a href="/">go to home index</a>
    </div>
</template>

<script>
import axios from '@/libs/axios'
import _ from 'lodash'
export default {
    name: 'hello',
    data () {
        return {
            form: {
                timer: 0,
                timer_status: false,
                times: 0,
                spacing: 1000,
            },
            msg: 'this is home hello!'
        }
    },
    watch: {
        form: {
            handler ( v, ov) {
                if ( v.timer != ov.timer) {
                    let timer_status = Boolean( v.timer);
                    if ( v.timer_status != timer_status) {
                        this.$set( this.$data.form, 'timer_status', timer_status);
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        logout () {
            axios.post('/logout').then( res => {
                console.log( res);
            }).catch( error => {
                console.error( error);
            });
        },
        sendQuery () {
            axios.post('/web/query').then( res => {
                console.log( res.data.message);
            }).catch( error => {
                console.error( error);
            });
        },
        queryTest ( v) {
            if ( _.isBoolean( v)) {
                if ( v) {
                    let spacing = this.$data.form.spacing;
                    let timer = setInterval( () => {
                        this.$data.form.times++;
                        this.sendQuery();
                    }, spacing);
                    this.$set( this.$data.form, 'timer', timer);
                } else {
                    clearInterval( this.$data.form.timer);
                    this.$set( this.$data.form, 'timer', 0);
                }
            }else {
                throw new Error( 'v is not boolean!');
            }
        }
    }
}
</script>